Custom Editing

Wijgrid allows you to add custom editors to grid columns by using the beginEdit and endEdit methods. You can add different widgets such as wijcalendar, wijcombobox etc in the cells to customize editing.

For example, the script below adds a wijcombobox in the column Quantity, allowing user to select one value from various values given in the combobox.

Live Widget
Script

Script	Copy Code
<script type="text/javascript"> $(document).ready(function () { $('#wijgrid').wijgrid({ data: [ ['US', 'Ipsum LLC',63.57, 150, .11], ['Japan','Lorem Inc', 74.85, 100, .19], ['China','Dolor International', 29.86, 250, .20], ['Russia', 'Blandit Enterprises',81.68, 150, .25], ['India', 'Vivamus Services',76.30, 200, .12] ], columns: [ { headerText: "Country", dataType: 'string' }, { headerText: "ProductName", dataType: 'string' }, { headerText: "Unit Price", dataType: 'currency' }, { headerText: "Quantity (Custom Column)", dataType: 'number', dataFormatString: 'n0' }, { headerText: "Discount", dataType: 'number', dataFormatString: 'p0' }, ], selectionMode: 'singleCell', editingMode: 'cell', beforeCellEdit: function(e, args) { switch (args.cell.cellIndex()) { case 3: // add combobox in the cell $('<input />') .width('100%') .val(args.cell.value()) .appendTo(args.cell.container().empty()) .wijcombobox({ data: [ { label: '100', value: '100' }, { label: '150', value: '150' }, { label: '200', value: '200' }, { label: '250', value: '250' } ], selectedValue: args.cell.value(), isEditable: false }) .focus(); args.handled = true break; } }, afterCellEdit: function(e, args) { switch (args.cell.cellIndex()) { case 0: args.cell.container().find('input').wijcombobox('destroy'); break; } } }); }); </script>

Script

Copy Code

<script type="text/javascript">
    $(document).ready(function () {
        $('#wijgrid').wijgrid({
                 data: [
         ['US', 'Ipsum LLC',63.57, 150, .11],
         ['Japan','Lorem Inc', 74.85, 100, .19],
         ['China','Dolor International', 29.86, 250, .20],
         ['Russia', 'Blandit Enterprises',81.68, 150, .25],
         ['India', 'Vivamus Services',76.30, 200, .12]
            ],

            columns: [
        
        { headerText: "Country", dataType: 'string' },
        { headerText: "ProductName", dataType: 'string' },
        { headerText: "Unit Price", dataType: 'currency' },
        { headerText: "Quantity (Custom Column)", dataType: 'number', dataFormatString: 'n0' },
        { headerText: "Discount", dataType: 'number', dataFormatString: 'p0' },
        
            ],
            selectionMode: 'singleCell',
            editingMode: 'cell',
            beforeCellEdit: function(e, args) {
                switch (args.cell.cellIndex()) {
                    case 3:
                        // add combobox in the cell
                        $('<input />')
                            .width('100%')
                            .val(args.cell.value())
                            .appendTo(args.cell.container().empty())
                            .wijcombobox({
                               data: [
                                   { label: '100', value: '100' },
                                   { label: '150', value: '150' },
                                   { label: '200', value: '200' },
                                   { label: '250', value: '250' }
                                ],
                                selectedValue: args.cell.value(),
                                isEditable: false
                            })
                            .focus();
                        args.handled = true
                        break;
                }
            },
            afterCellEdit: function(e, args) {
                switch (args.cell.cellIndex()) {
                    case 0:
                        args.cell.container().find('input').wijcombobox('destroy');
                        break;
                }
            }
        });
    });
</script>